<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--表单，action="https://www.baidu.com/s" 跳转到百度，s = search-->
<form action="https://www.baidu.com/s">
    <!--    搜索框  name="wd" wd 由百度程序员决定,value是输入框的默认值，maxlength是输入框最大长度-->
    <input type="text" name="wd" value="CSDN">
    <!--    按钮-->
    <button>搜索</button>
</form>
<form action="https://search.jd.com/search">
    <input type="text" name="account">
    <button>搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search">
    <!--   lable是一个文本标签，功能是通过lable的文字来获取焦点，for=""，for对应的是input中的id，其实和密码的lable使用效果一样-->
    <lable for="zhanghu">账户:</lable>
    <!-- 文本输入框和密码输入框-->
    <input id="zhanghu" type="text" name="account" value="lk">
    <br>
    <lable>密码:<input type="password" name="password" value=""></lable>

    <br>
    <!--单选框,radio是使input成为单选框的属性，单选框有多个input时，name的值要相同。value的值必须填，浏览器才能拿到值-->

    <lable><input type="radio" name="dex" value="male">男</lable>
    <lable><input type="radio" name="dex" value="female" checked>女</lable>
    <br>
    <!-- 多选框,checkbox是使input成为多选框的属性，和单选框属性一样-->
    <input type="checkbox" name="hobby" value="smoke" checked>抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头
    <!--    隐藏域,hidden属性，不可见的输入区域-->
    <input type="hidden" name="tag" value="toutiao">
    <br>
    <!--    表单的提交按钮，不输入value是默认值是 "提交"-->
    <input type="submit" value="确认">
    <!--    重置按钮-->
    <input type="reset" value="清除">
    <!--    按钮第二种写法，button属性中 type="submit"的submit可以不填，它是默认值-->
    <!--    <button type="submit">确认</button>-->
</form>
<hr>

<!--文本域-->
<textarea name="textarea" cols="30" rows="10">这是文本域</textarea>
<hr>

<!--下拉选择框-->
<select name="space">
    <option value="">南充</option>
    <option value="">成都</option>
    <option value="">广安</option>
</select>
<hr>
<form action="">
<!--    将表单进行分类-->
    <fieldset>
<!--        分类的标题-->
        <legend>登录</legend>
        <lable>账户：<input type="text"></lable>
        <br>
        <lable>密码：<input type="password"></lable>
    </fieldset>
    <fieldset>
        <!--        分类的标题-->
        <legend>登录</legend>
        <lable>账户：<input type="text"></lable>
        <br>
        <lable>密码：<input type="password"></lable>
    </fieldset>
</form>
<!--
 * form标签中的属性：
     1：action：行为，如 action="https://search.jd.com/search"点击提交跳转这个网页
 * input标签中的属性：
     1.name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
     2.value 属性：输入框的默认输入值（一般不用，无意义）
     3.maxlength 属性：输入框 大可输入长度。
     4.checked 属性：让该单选按钮默认选中。
     5.disable 属性：让该输入框处于禁用状态
     6.type(类型)属性控制这输入框的功能：
       · type="text"时是文本框，
       · type="password"时是密码输入框
       · type="radio"时是单选框
       · type="checkbox"时是多选框~单选框和多选框的name=""属性要相同
       · type="hidden"时是隐藏框
       · type="submit"时是按钮框
       · type="reset"时是清除你所有input中选择的值，有默认值恢复默认值
            - 所有属性中的value的值必须填，浏览器才能拿到值
            - input中的type如果是type="button",就是一个普通按钮需要js写监听事件，button中也一样
            - button  也有type="submit"(提交)、type="reset"(清除)这两个属性
  * textarea标签的属性：
      1：name 属性：数据的名称
      2：cols 属性：文本域的列
      3：row  属性：文本域的行
      4：disable 属性：让该文本域处于禁用状态
     ！textarea的属性不能写type属性
  * select标签的属性：
      1：disable 属性：让该输入框处于禁用状态
      2：option(选项)选项的各个功能：
        · value：选项的值  (如果选择地址，value可以说简称)
        · selected：该下拉选择框选择的默认值
        · disable：让该输入框处于禁用状态
  * Lable标签的属性：
      1：for 属性：for=""，for对应的是input中的id，从而通过文字获取焦点
        - input标签有value的话，最好用lable标签包裹 或者使用id关联起来.
            例如：<lable>密码:<input type="password" name="password" value=""></lable>
  * fieldset标签的属性：将表单中的东西分类
      1：legend：分类的标题-->
</body>
</html>